import { Input, NavBar, TextArea } from 'antd-mobile'
import { useEffect, useState } from 'react'

import styles from './index.module.scss'
type Props = {
  type: string
  value: string
  colsePop: () => void
  update: (value: string, type: string) => void
}
const EditInput = ({ type, value, colsePop, update }: Props) => {
  const [val, setVal] = useState(value)
  const sumbit = (val: string, type: string) => {
    update(val, type)
  }
  useEffect(() => {
    setVal(value)
  }, [value])
  return (
    <div className={styles.root}>
      <NavBar
        className="navbar"
        onBack={colsePop}
        right={
          <span className="commit-btn" onClick={() => sumbit(val, type)}>
            提交
          </span>
        }>
        编辑{type === 'name' ? '昵称' : '简介'}
      </NavBar>

      <div className="edit-input-content">
        <h3>{type === 'name' ? '昵称' : '简介'}</h3>
        {type === 'name' ? (
          <div className="input-wrap">
            <Input placeholder="请输入" value={val} onChange={setVal} />
          </div>
        ) : (
          <TextArea
            className="textarea"
            placeholder="请输入"
            // 展示：右下角的字数统计
            showCount
            // 指定内容最大长度
            maxLength={100}
            // 指定 文本域 展示内容的行数（文本域高度）
            rows={4}
            value={val || ''}
            onChange={setVal}
          />
        )}
      </div>
    </div>
  )
}

export default EditInput
